<template>
  <scroll-view scroll-y class="scroll-container">
    <view class="explore-progress">
      <view class="text_t">选择地区</view>
      <picker
        mode="multiSelector"
        :range="multiArray"
        :value="multiIndex"
        @columnchange="bindMultiPickerColumnChange"
      >
        <view class="picker-text">
          {{ multiArray[0][multiIndex[0]] }}，{{ multiArray[1][multiIndex[1]] }}，{{ multiArray[2][multiIndex[2]] }}
        </view>
      </picker>
    </view>
    <view class="container">
      <swiper
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <image src="/static/quanzhou/city1.png" class="img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/quanzhou/city2.png" class="img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/quanzhou/city3.png" class="img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/quanzhou/city4.png" class="img"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="city-intro">
      <view class="text_d">泉州介绍</view>
      <view class="text_f">海上丝绸之路起点・泉州</view>
      <view class="text_www">
        历史文化：泉州是国务院首批公布的 24 个历史文化名城之一，是古代 “海上丝绸之路” 起点，宋元时期被誉为 “东方第一大港”。
      </view>
      <view class="text_www">
        著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
      </view>
      <view class="text_www">
        特色文化：拥有<a href="">南音</a>、<a href="">木偶戏</a>和<a href="">闽南建筑</a>等丰富的非物质文化遗产。
      </view>
    </view>

    <view class="media-show">
      <video
        :src="quanzhou.video"
        :poster="quanzhou.poster"
        controls
        class="city-video"
      ></video>
    </view>
	
    <view class="preference-setting">
      <view class="transport">
        <text class="text_taa">出行方式：</text>
        <view class="text_aa">
          <radio-group @change="onTransportChange">
            <radio :value="item" v-for="item in transportOptions" :key="item" class="text_aadd">
              {{ item }}
            </radio>
          </radio-group>
        </view>
      </view>
      <view class="text_aa">
        <text>显示推荐景点：</text>
        <switch v-model="showRecommend" />
      </view>
      <view class="text_aa">
        <text>探索半径：{{ radius }}km</text>
        <slider
          :value="radius"
          @change="onRadiusChange"
          min="1"
          max="20"
          class="radius-slider"
        />
      </view>
    </view>
    <view class="text_bb"></view>
    <view class="explore-progress">
      <text>探索进度：</text>
      <progress :percent="100" show-info />
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      quanzhou: {
        video: '/static/quanzhou/city-video.mp4',
        poster: '/static/quanzhou/city1.png',
      },
      region: ['福建省', '泉州市', '丰泽区'],
      transportOptions: ['公交', '自驾', '步行'],
      selectedTransport: '公交',
      showRecommend: true,
      radius: 12,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      multiArray: [
        ['福建省', '浙江省', '广东省'], 
        ['泉州市', '福州市', '厦门市'], 
        ['丰泽区', '鲤城区', '洛江区'], 
      ],
      multiIndex: [0, 0, 0], 
      provinceCityMap: {
        '福建省': ['泉州市', '福州市', '厦门市'],
        '浙江省': ['杭州市', '宁波市', '温州市'],
        '广东省': ['广州市', '深圳市', '珠海市'],
      },
      cityDistrictMap: {
        '泉州市': ['丰泽区', '鲤城区', '洛江区'],
        '福州市': ['鼓楼区', '台江区', '仓山区'],
        '厦门市': ['思明区', '湖里区', '集美区'],
        '杭州市': ['上城区', '拱墅区', '西湖区'],
        '宁波市': ['海曙区', '江北区', '北仑区'],
        '温州市': ['鹿城区', '龙湾区', '瓯海区'],
        '广州市': ['天河区', '越秀区', '海珠区'],
        '深圳市': ['南山区', '福田区', '罗湖区'],
        '珠海市': ['香洲区', '金湾区', '斗门区'],
      },
    };
  },
  methods: {
    onRegionChange(e) {
      this.region = e.detail.value;
      console.log('选中的地区：', this.region);
    },
    onTransportChange(e) {
      this.selectedTransport = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
    bindMultiPickerColumnChange(e) {
      const column = e.detail.column;
      const value = e.detail.value;
      const newMultiIndex = [...this.multiIndex];
      newMultiIndex[column] = value;
      if (column === 0) {
        const province = this.multiArray[0][value];
        newMultiIndex[1] = 0; 
        newMultiIndex[2] = 0; 

        this.multiArray[1] = this.provinceCityMap[province] || [];
        const city = this.multiArray[1][0];
        this.multiArray[2] = this.cityDistrictMap[city] || [];
      } else if (column === 1) {
        const city = this.multiArray[1][value];
        newMultiIndex[2] = 0;
        this.multiArray[2] = this.cityDistrictMap[city] || [];
      }

      this.multiIndex = newMultiIndex;
    },
  },
};
</script>
<style>
.scroll-container {
  background-color: #e5e5e5;
  min-height: 100vh;
  padding: 15px;
}
.card {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 375px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 15px auto 0; 
  padding: 20px;
  box-sizing: border-box;
}

.container {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 375px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}
.container swiper {
  width: 90%;
  height: 90%;
}

.img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.city-intro {
  background-color: #fff;
  width: 90%;
  max-width: 375px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  border-radius: 12px;
  padding: 20px;
}
.text_d {
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 5px;
}

.text_f {
  font-weight: bold;
  font-size: 15px;
  padding-bottom: 10px;
}
.text_www {
  font-size: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.media-show {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 375px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}
.city-video {
  width: 90%;
  height: 90%;
  border-radius: 20px;
  object-fit: cover;
}
.preference-setting {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 375px;
  height: 250px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  border-radius: 12px;
  padding: 20px;
}
.text_taa {
  font-weight: bold;
  font-size: 25px;
}
.text_aadd {
  margin-left: 15px;
}
.text_aa {
  margin-top: 10px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.text_bb {
  margin-top: 10px;
}
.explore-progress {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 375px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  border-radius: 12px;
  padding: 20px;
}

.picker-text {
  font-size: 14px;
  color: #333;
  margin-top: 5px;
}
</style>